<template>
  <div class="loginBg">
    <div class="loginBox">
      <div class="loginBox-title">云飞ERP</div>
      <div class="loginBox-From">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="name">
            <el-input
              v-model="form.name"
              placeholder="账号"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.password"
              placeholder="密码"
              prefix-icon="el-icon-s-goods"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="14">
                <el-input
                  v-model="form.code"
                  placeholder="验证码"
                  prefix-icon="el-icon-platform-eleme"
                ></el-input>
              </el-col>
              <el-col :span="10">
                <img class="imgCode" src="../assets/bg.jpg" alt="" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col>
                <el-checkbox @change="checkboxValue" v-model="checkedMe"
                  >记住我</el-checkbox
                >
              </el-col>
              <el-col></el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              element-loading-spinner="el-icon-loading"
              @click="loginConfirm"
              v-loading="loading"
              element-loading-background="rgba(0, 0, 0, 0.2)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import admin from "@/menuList/admin.json";
import user from "@/menuList/user.json";
import {
  SetCookie,
  setStore,
  RemoveCookie,
  GetCookie,
  removeStore,
  getStore,
} from "@/api/storage.js";
export default {
  name: "login",
  data() {
    return {
      form: {
        name: "",
        password: "",
        code: 666,
      },
      loading: false,
      checkedMe: false,
      rules: {
        name: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    let userInfo = JSON.parse(getStore(userInfo));
    console.log(userInfo);
    window.addEventListener("keydown", this.keydown);
  },
  methods: {
    async loginConfirm() {
      this.loading = true;
      let type = false;
      if (this.form.name.trim() == "" || this.form.password.trim() == "") {
        this.$message({
          message: "账号或者密码不能为空！",
          type: "error",
        });
      } else {
        await axios
          .get("http://127.0.0.1:8081/user", {
            params: {
              username: this.form.name,
              password: this.form.password,
            },
          })
          .then((res) => {
            if (res.data.status == 200) {
              type = true;
              setStore("meauList", JSON.stringify(admin)); //存菜单列表
              SetCookie("uid", res.data.data.uid);
              this.$router.push(
                {
                  name: "home",
                },
                () => {}
              );
            } else if (res.data.status == 202) {
              this.$message({
                showClose: true,
                message: "账号或者密码错误",
                type: "error",
              });
              this.$router.push({ path: "/" });
              this.form.name = "";
              this.form.password = "";
              this.loading = false;
            }
          })
          .catch((error) => {
            console.log("获取数据失败" + error);
          });
      }
      if (type) {
        await axios.get("http://127.0.0.1:8081/user/menu").then((res) => {
          console.log(res);
        });
      }
      if (this.checkedMe && this.form.name == user.admin.username) {
        let userInfo = {
          name: this.form.name,
          password: this.form.password,
        };
        setStore("userInfo", JSON.stringify(userInfo));
      } else {
        removeStore("userInfo");
      }
    },
    //登录回车事件
    keydown(e) {
      if (e.keyCode == 13) {
        this.loginConfirm();
      }
    },
    checkboxValue(value) {
      console.log(value);
    },
  },
  destroyed() {
    window.addEventListener("keydown", this.keydown, false);
  },
};
</script>
<style lang="less" scoped>
.loginBg {
  width: 100%;
  height: 100%;
  background: url("../assets/bg.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .loginBox {
    width: 360px;
    border-radius: 10px;
    background: #fff;
    padding: 10px 30px;
    .loginBox-title {
      height: 60px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bolder;
      color: #707070;
      font-size: 20px;
    }
    .imgCode {
      width: 130px;
      height: 40px;
      display: block;
      margin-left: 20px;
      border-radius: 5px;
    }
  }
}
</style>
<style>
.loginBox .el-form-item__content {
  margin-left: 0 !important;
}
.loginBox .el-form-item {
  margin-bottom: 18px;
}
.loginBox .el-form-item:nth-of-type(3) {
  margin-bottom: 5px;
}
.loginBox .el-button {
  width: 100%;
}
</style>
